<template>
    <div class="">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item>
                <el-breadcrumb-item>放心选品类管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="plugins-tips">
            任务列表
        </div>
        <el-table :data="tableData"
                  style="width:100%"
                  border
                  stripe
                  highlight-current-row>
            <el-table-column prop="id" label="ID" width="80"></el-table-column>
            <el-table-column prop="headLine" label="项目名称" min-width="200"></el-table-column>
            <el-table-column prop="priority" label="级别" width="80"></el-table-column>
            <el-table-column prop="currProgress" label="当前进度" width="80"></el-table-column>
            <el-table-column prop="leaderMis" label="用户名" width="80"></el-table-column>
            <el-table-column align="center" label="操作" width="170">
                <template scope="scope">
                    <el-button class="outermargin1" type="primary" @click="detail(scope.row.id)"
                               size="small">
                        详情
                    </el-button>
                    <el-button class="outermargin1" type="danger" @click="del(scope.row.id)"
                               size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    // 品类管理 -- 关联品类、下架、添加品类图片、关联文章背景图片、文章编辑（文章管理）
    import Api from '~util/api.js'

    export default {
        name: '',
        data() {
            return {
                tableData: [
                    {
                        id: 2,
                        type: 3,
                        headLine: "业务品牌退货地址-项目主页3",
                        priority: "P3",
                        currProgress: 3,
                        leaderMis: "zhangyang63",
                        ctime: 1531124188,
                        utime: 1531124188
                    },
                    {
                        id: 1,
                        type: 4,
                        headLine: "业务品牌退货地址-项目主页4",
                        priority: "P4",
                        currProgress: 4,
                        leaderMis: "zhangyang61",
                        ctime: 0,
                        utime: 1531123803
                    }
                ]
            };
        },
        created() {
        },
        methods: {
            detail(id) {
                this.$router.push({
                    name: 'taskDetail',
                    query: {
                        id: id
                    }
                })
            },
            del(id) {
                alert(id)
            }
        }
    };
</script>

<style lang="sass" type="text/scss">
    .fxx-category-list {
        .box-card {
            margin-bottom: 10px;
            width: 600px;
            .el-card__header {
                font-weight: bold;
                padding: 0 0 0 10px;
            }
            .text.item {
                line-height: 1;
            }
            .el-card__body {
                padding: 10px;
            }
        }
        .surveying-status {
            font-weight: bold;
            font-size: 12px;
            color: rgb(26, 157, 255);
        }
        .gray-through {
            color: rgb(192, 192, 192);
            text-decoration: line-through;
        }
        .gray {
            color: rgb(192, 192, 192);
            .surveying-status {
                color: rgb(192, 192, 192);
            }
        }
        .keywordinput {
            width: 300px;
        }
        .pagination-box {
            margin-top: 20px;
        }
        .outermargin1 {
            margin: 15px 0 5px;
        }
        .outermargin2 {
            margin: 5px 0 15px;
        }
    }
</style>
